<template>
  <el-dialog
    title="选择成员"
    v-model="visibleDialog"
    :width="600"
    append-to-body
    :lock-scroll="false"
    class="promoter_person"
  >
    <div class="person_body clear">
      <div class="person_tree l">
        <input
          type="text"
          placeholder="搜索成员"
          v-model="searchVal"
          @input="getDebounceData($event, activeName)"
        />
        <el-tabs v-model="activeName" @tab-change="handleClick">
          <el-tab-pane label="组织架构" name="1"></el-tab-pane>
          <el-tab-pane label="角色列表" name="2"></el-tab-pane>
        </el-tabs>
        <p class="ellipsis tree_nav" v-if="activeName === '1' && !searchVal">
          <span @click="getDepartmentList(0)" class="ellipsis">天下</span>
          <span
            v-for="(item, index) in departments.titleDepartments"
            class="ellipsis"
            :key="index + 'a'"
            @click="getDepartmentList(item.id)"
            >{{ item.departmentName }}</span
          >
        </p>
        <selectBox :list="list" style="height: 360px" />
      </div>
      <selectResult :total="total" @del="delList" :list="resList" />
    </div>
    <template #footer>
      <el-button @click="$emit('update:visible', false)">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import selectBox from '../process/selectBox.vue';
  import selectResult from '../process/selectResult.vue';
  import { computed, watch, ref } from 'vue';
  import $func from '@/utils/fun.js';
  import {
    departments,
    roles,
    getDebounceData,
    getRoleList,
    getDepartmentList,
    searchVal,
  } from '@/api/workflow/common';
  let props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
    isDepartment: {
      type: Boolean,
      default: false,
    },
  });
  let emits = defineEmits(['update:visible', 'change']);
  let visibleDialog = computed({
    get() {
      return props.visible;
    },
    set() {
      closeDialog();
    },
  });
  let checkedRoleList = ref([]);
  let checkedEmployessList = ref([]);
  let checkedDepartmentList = ref([]);
  let activeName = ref('1');
  let list = computed(() => {
    if (activeName.value === '2') {
      return [
        {
          type: 'role',
          not: false,
          data: roles.value,
          isActiveItem: (item) => $func.toggleClass(checkedRoleList.value, item, 'roleId'),
          change: (item) => $func.toChecked(checkedRoleList.value, item, 'roleId'),
        },
      ];
    } else {
      return [
        {
          isDepartment: props.isDepartment,
          type: 'department',
          data: departments.value.childDepartments,
          isActive: (item) => $func.toggleClass(checkedDepartmentList.value, item),
          change: (item) => $func.toChecked(checkedDepartmentList.value, item),
          next: (item) => getDepartmentList(item.id),
        },
        {
          type: 'employee',
          data: departments.value.employees,
          isActive: (item) => $func.toggleClass(checkedEmployessList.value, item),
          change: (item) => $func.toChecked(checkedEmployessList.value, item),
        },
      ];
    }
  });
  let resList = computed(() => {
    let data = [
      {
        type: 'role',
        data: checkedRoleList.value,
        cancel: (item) => $func.removeEle(checkedRoleList.value, item, 'roleId'),
      },
      {
        type: 'employee',
        data: checkedEmployessList.value,
        cancel: (item) => $func.removeEle(checkedEmployessList.value, item),
      },
    ];
    if (props.isDepartment) {
      data.splice(1, 0, {
        type: 'department',
        data: checkedDepartmentList.value,
        cancel: (item) => $func.removeEle(checkedDepartmentList.value, item),
      });
    }
    return data;
  });
  watch(
    () => props.visible,
    (val) => {
      if (val) {
        activeName.value = '1';
        getDepartmentList();
        searchVal.value = '';
        checkedEmployessList.value = props.data
          .filter((item) => item.type === 1)
          .map(({ name, targetId }) => ({
            employeeName: name,
            id: targetId,
          }));
        checkedRoleList.value = props.data
          .filter((item) => item.type === 2)
          .map(({ name, targetId }) => ({
            roleName: name,
            roleId: targetId,
          }));
        checkedDepartmentList.value = props.data
          .filter((item) => item.type === 3)
          .map(({ name, targetId }) => ({
            departmentName: name,
            id: targetId,
          }));
      }
    },
  );
  let total = computed(() => {
    return (
      checkedEmployessList.value.length +
      checkedRoleList.value.length +
      checkedDepartmentList.value.length
    );
  });

  const handleClick = () => {
    searchVal.value = '';
    if (activeName.value === '1') {
      getDepartmentList();
    } else {
      getRoleList();
    }
  };
  const saveDialog = () => {
    let checkedList = [
      ...checkedRoleList.value,
      ...checkedEmployessList.value,
      ...checkedDepartmentList.value,
    ].map((item) => ({
      type: item.employeeName ? 1 : item.roleName ? 2 : 3,
      targetId: item.id || item.roleId,
      name: item.employeeName || item.roleName || item.departmentName,
    }));
    emits('change', checkedList);
  };
  const delList = () => {
    checkedEmployessList.value = [];
    checkedRoleList.value = [];
    checkedDepartmentList.value = [];
  };
  const closeDialog = () => {
    emits('update:visible', false);
  };
</script>

<style>
  @import '@/assets/styles/dialog.css';
</style>
